<template> 
	<div class="wrapper"
  @click="handleGallaryClose"
  >
  <div class="head">
    <swiper :options="swiperOptions">
        <swiper-slide v-for="(item,index) in imgs" :key="index">
            <img class="head-img" :src="item">
            <div class="icon-img">&#xe663;</div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

  </div>
</template> 

<script> 

  export default { 
   name:'Gallary',
   data () { 
    return { 
      swiperOptions:{
        pagination:'.swiper-pagination',
        paginationType:'fraction',
        observeParents:true,
        observer:true
      },
    }; 
  }, 
  props:{
    imgs:{
      type:Array,
      default(){
        return [];
      }
    }
  },
  methods: { 
    handleGallaryClose(){
      this.$emit('close')
    }

  },
  mounted(){

  }


}; 
</script> 

<style scoped> 
.wrapper{
  z-index: 2;
 position: fixed;
 left: 0px;
 top: 0px;
 bottom: 0px;
 right: 0px;
 background: #000;
 display: flex;
  flex-direction: column;
 justify-content: center;
}
.head{
 background: white;
 display: flex;
 /*color: white;*/
}
.head-img{
  max-width: 100%;
}
.icon-img{
  position: absolute;
  bottom: 25px;
  left: 5px;
}
.head-info{
  color: white;
  position: absolute;
  bottom: 5px;
  left: 5px;
  z-index: 1;
  font-size: 18px;
}
.swiper-pagination,swiper-pagination-fraction{
  color: white
}
</style> 